<div>
  <form class="layui-form" action="" lay-filter="testform">
    <div class="layui-form-item">
      <input type="text" name="title" id="custom" value="" placeholder="请选择数据" autocomplete="off" class="layui-input">
    </div>

    <!-- 选项卡 -->

    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
      <ul class="layui-tab-title">
        <li class="layui-this">时段差值数据</li>
        <li>历史仪表数据</li>
        <li>公式库</li>
        <input type="checkbox" name="" title="乘倍率数据" lay-skin="primary" id="beilv" lay-filter='Lay-check'>
      </ul>

      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show" style="height: 360px;">
          <div style="height: 380px; display: flex;align-items: center;">
            <!-- 树形 -->
            <div id="test2" class="demo-tree" style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;">
            </div>
            <!--  -->
            <div id="test3" class="demo-tree"
              style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;margin-left: 30px;">
            </div>
            <div id="test-device1" class="demo-tree"
              style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;margin-left: 30px; visibility: hidden;">
            </div>

            <div class="btn-container">
              <button type="button" class="layui-btn-lg layui-btn btn-style" onclick=clearAll()>清空</button>
              <button type="button" class="layui-btn-lg layui-btn btn-style" onclick=calc(1)>+</button>
              <button type="button" class="layui-btn-lg layui-btn btn-style" onclick=calc(2)>-</button>
              <button type="button" class="layui-btn-lg layui-btn btn-style" onclick=calc(3)>x</button>
              <button type="button" class="layui-btn-lg layui-btn btn-style" onclick=calc(4)>÷</button>
            </div>
          </div>
        </div>
        <div class="layui-tab-item" style="height: 360px;">
          <div style="height: 380px; display: flex;align-items: center;">
            <!-- 树形 -->
            <div id="test4" class="demo-tree" style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;">
            </div>
            <!--  -->
            <div id="test5" class="demo-tree"
              style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;margin-left: 30px;">
            </div>
            <div id="test-device2" class="demo-tree"
              style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;margin-left: 30px; visibility: hidden;">
            </div>

            <div class="btn-container">
              <button type="button" class="layui-btn-lg layui-btn btn-style" onclick=clearAll()>清空</button>
              <button type="button" class="layui-btn-lg layui-btn btn-style" onclick=calc(1)>+</button>
              <button type="button" class="layui-btn-lg layui-btn btn-style" onclick=calc(2)>-</button>
              <button type="button" class="layui-btn-lg layui-btn btn-style" onclick=calc(3)>x</button>
              <button type="button" class="layui-btn-lg layui-btn btn-style" onclick=calc(4)>÷</button>
            </div>
          </div>
        </div>
        <div class="layui-tab-item" style="height:360px">
          <div style="height: 380px; display: flex;align-items: center;">
            <!-- 树形 -->
            <div id="formula-computer" class="demo-tree"
              style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;"></div>
            <!--  -->
            <div id="formula-user" class="demo-tree"
              style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;margin-left: 30px;">
            </div>
            <div style="width: 25%; height: 95%;margin-left: 31px;"></div>

            <div class="btn-container">
              <button type="button" class="layui-btn-lg layui-btn  btn-style" onclick=clearAll()>清空</button>
              <button type="button" class="layui-btn-lg layui-btn  btn-style" onclick=calc(1)>+</button>
              <button type="button" class="layui-btn-lg layui-btn  btn-style" onclick=calc(2)>-</button>
              <button type="button" class="layui-btn-lg layui-btn  btn-style" onclick=calc(3)>x</button>
              <button type="button" class="layui-btn-lg layui-btn  btn-style" onclick=calc(4)>÷</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style=" margin-top:1px;">
    </fieldset>
    <span class="layui-btn" lay-submit lay-filter="formDemo"
      style="position: relative;left: 1100px;bottom: 0px;">确定</span>

  </form>





  <script type="text/html" template lay-done="layui.data.getData(d.params)">
  </script>
</div>

<style>
  .btn-container {
    margin-left: 30px;
    width: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .btn-style {
    margin-bottom: 20px;
    margin-left: 0 !important;
    width: 100%;
  }

  .layui-icon-file:before {
    content: "\e68e";
  }

  .layui-tree-main {
    width: 100%;
    height: 100%;
  }

  .layui-tree-txt {
    width: 100%;
  }

  .layui-tree-entry {
    height: 28px;
  }

  .tree-txt-active {
    color: #409EFF;
  }

  .layui-tree-line .layui-tree-entry:hover .layui-tree-txt {
    color: #409EFF;
    text-decoration: underline;
    transition: .3s;
  }
</style>

<script>
  layui.use(['admin', 'laytpl', 'form', 'laypage', 'form', 'layer', 'view', 'tree', 'util',
      'setter', 'element'
    ], function () {
      var $ = layui.$,
        admin = layui.admin,
        table = layui.table,
        laytpl = layui.laytpl,
        laypage = layui.laypage,
        layer = layui.layer,
        view = layui.view,
        setter = layui.setter,
        tree = layui.tree,
        util = layui.util
      form = layui.form
      element = layui.element
      tipsIndex = null;
      form.render()

      var token = layui.data(layui.setter.tableName).token

      // 单选
      $('#test2').click(function (e) { // 在页面任意位置点击而触发此事件
        if ($(e.target).attr('class') === "layui-tree-txt") { // 防止因为点击展开按钮把已选中的样式取消
          $("#test2 .layui-tree-txt").removeClass("tree-txt-active"); // 移除点击样式
          $(e.target).addClass("tree-txt-active"); // e.target表示被点击的目标
        }
      });

      $('#test4').click(function (e) { // 在页面任意位置点击而触发此事件
        if ($(e.target).attr('class') === "layui-tree-txt") { // 防止因为点击展开按钮把已选中的样式取消
          $("#test4 .layui-tree-txt").removeClass("tree-txt-active"); // 移除点击样式
          $(e.target).addClass("tree-txt-active"); // e.target表示被点击的目标
        }
      });

      window.clearAll = function () {
        document.getElementById('custom').value = ''
      }
      window.calc = function (params) {
        let value = document.getElementById('custom').value;
        let flag = value.charAt(value.length - 1);
        if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
          document.getElementById('custom').value = value.slice(0, value.length - 1);
        }
        if (value === '') {
          layer.msg('请先选择数据!')
          return
        }
        if (params === 1) {
          document.getElementById('custom').value = document.getElementById('custom').value + '+'
        } else if (params === 2) {
          document.getElementById('custom').value = document.getElementById('custom').value + '-'
        } else if (params === 3) {
          document.getElementById('custom').value = document.getElementById('custom').value + '×'
        } else if (params === 4) {
          document.getElementById('custom').value = document.getElementById('custom').value + '÷'
        }

      }

      element.on('tab(docDemoTabBrief)', function (data) {
        if (data.index == 2) {
          $('.layui-form-checkbox').attr("style", "display:none;");
        } else {
          $('.layui-form-checkbox').attr("style", "display:inline-block;");
        }
      });




      layui.data.getData = function (data) {

        // 一系列的数据格式转换
        // console.log(data.treeData);
        // data.treeData = eval('(' + data.treeData + ')')
        // console.log(data.treeData);

        // 树形结构
        $.ajax({
          type: 'post',
          headers: {
            Accept: "application/json; charset=utf-8"
          },
          url: setter.urlTest + 'floor/bemFloorTree',
          data: {
            token: token,
          },
          success: function (data) {
            newTreeDataArr = [data];

            // 查看是否选中倍率
            var checked = false;
            form.on('checkbox(Lay-check)', function (obj) {
              checked = !checked;
            });


            //基本演示
            tree.render({
              elem: '#test2',
              data: newTreeDataArr,
              accordion: false,
              // showLine: false,
              id: 'demoId1',
              click: function (obj) {
                var data = obj.data; //获取当前点击的节点数据
                console.log(data);
                $.ajax({
                  method: 'post',
                  url: setter.urlTest + '/productModel/getProductModelTree',
                  // dataType: 'text',
                  data: {
                    token: token,
                  },
                  success: function (res) {
                    res = res.jsonStr;
                    var inputDom = document.getElementById('custom')
                    var value = eval('[' + res + ']')
                    value.forEach(item => {
                      let obj = item;
                      var keyMap = {
                        "text": "title"
                      }
                      for (let key in obj) {
                        let newKey = keyMap[key];
                        if (newKey) {
                          obj[newKey] = obj[key]
                          delete obj[key]
                        }
                      }
                    })
                    // console.log(res);
                    tree.render({
                      elem: '#test3',
                      data: value,
                      id: 'demoId2',
                      showLine: false,
                      click: function (obj) {
                        console.log(checked);
                        var flag = inputDom.value.charAt(inputDom.value.length - 1);
                        flag = flag === '' ? '+' : flag
                        if (checked == true) {
                          var dataName = 'FCB' + data.id + '_' + data.fullname + '_' + obj
                            .data.fullname;
                        } else {
                          var dataName = 'FCN' + data.id + '_' + data.fullname + '_' + obj
                            .data.fullname;
                        }
                        if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
                          inputDom.value = inputDom.value + dataName
                        } else {
                          layer.msg('请先选择运算符')
                        }
                      }
                    })

                  }
                })
                $.ajax({
                  method: 'post',
                  dataType: 'text',
                  url: setter.urlTest + 'floor/getTagByFloorId',
                  data: {
                    floorId: data.id,
                    token: token
                  },
                  success: function (result) {
                    if (result !== null || result !== undefined || result !== "") {
                      $('#test-device1').css('visibility', 'visible')
                    } else {
                      $('#test-device1').css('visibility', 'hidden')
                    }
                    var inputDom = document.getElementById('custom')
                    var value = eval('[' + result + ']')
                    value.forEach(item => {
                      let obj = item;
                      var keyMap = {
                        "text": "title"
                      }
                      for (let key in obj) {
                        let newKey = keyMap[key];
                        if (newKey) {
                          obj[newKey] = obj[key]
                          delete obj[key]
                        }
                      }
                    })
                    tree.render({
                      elem: '#test-device1',
                      data: value,
                      id: 'test-device1',
                      showLine: false,
                      click: function (obj) {
                        console.log(checked);
                        var flag = inputDom.value.charAt(inputDom.value.length - 1);
                        flag = flag === '' ? '+' : flag
                        if (checked == true) {
                          var dataName = 'TCB' + '_' + obj.data.fullname;
                        } else {
                          var dataName = 'TCN' + '_' + obj.data.fullname;
                        }
                        if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
                          inputDom.value = inputDom.value + dataName
                        } else {
                          layer.msg('请先选择运算符')
                        }
                      }
                    })

                  }


                })
              }
            });


            //基本演示
            tree.render({
              elem: '#test4',
              data: newTreeDataArr,
              accordion: false,
              // showLine: false,
              id: 'demoId3',
              click: function (obj) {
                var data = obj.data; //获取当前点击的节点数据
                console.log(data);
                $.ajax({
                  method: 'post',
                  url: setter.urlTest + '/productModel/getProductModelTree',
                  data: {
                    token: token
                  },
                  success: function (res) {
                    res = res.jsonStr;
                    var inputDom = document.getElementById('custom')
                    var value = eval('[' + res + ']')
                    value.forEach(item => {
                      let obj = item;
                      var keyMap = {
                        "text": "title"
                      }
                      for (let key in obj) {
                        let newKey = keyMap[key];
                        if (newKey) {
                          obj[newKey] = obj[key]
                          delete obj[key]
                        }
                      }
                    })
                    // console.log(value);
                    tree.render({
                      elem: '#test5',
                      data: value,
                      id: 'demoId4',
                      showLine: false,
                      click: function (obj) {
                        var flag = inputDom.value.charAt(inputDom.value.length - 1);
                        flag = flag === '' ? '+' : flag
                        if (checked == true) {
                          var dataName = 'FLB' + data.id + '_' + data.fullname + '_' + obj
                            .data.fullname;
                        } else {
                          var dataName = 'FLN' + data.id + '_' + data.fullname + '_' + obj
                            .data.fullname;
                        }
                        if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
                          inputDom.value = inputDom.value + dataName
                        } else {
                          layer.msg('请先选择运算符')
                        }


                      }



                    })

                  }
                })
                $.ajax({
                  method: 'post',
                  dataType: 'text',
                  url: setter.urlTest + 'floor/getTagByFloorId',
                  data: {
                    floorId: data.id,
                    token: token
                  },
                  success: function (result) {
                    if (result !== null || result !== undefined || result !== "") {
                      $('#test-device2').css('visibility', 'visible')
                    } else {
                      $('#test-device2').css('visibility', 'hidden')
                    }
                    var inputDom = document.getElementById('custom')
                    var value = eval('[' + result + ']')
                    value.forEach(item => {
                      let obj = item;
                      var keyMap = {
                        "text": "title"
                      }
                      for (let key in obj) {
                        let newKey = keyMap[key];
                        if (newKey) {
                          obj[newKey] = obj[key]
                          delete obj[key]
                        }
                      }
                    })
                    tree.render({
                      elem: '#test-device2',
                      data: value,
                      id: 'test-device2',
                      showLine: false,
                      click: function (obj) {
                        console.log(checked);
                        var flag = inputDom.value.charAt(inputDom.value.length - 1);
                        flag = flag === '' ? '+' : flag
                        if (checked == true) {
                          var dataName = 'TLB' + '_' + obj.data.fullname;
                        } else {
                          var dataName = 'TLN' + '_' + obj.data.fullname;
                        }
                        if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
                          inputDom.value = inputDom.value + dataName
                        } else {
                          layer.msg('请先选择运算符')
                        }
                      }
                    })

                  }


                })
              }
            });

            // 公式库
            $.ajax({
              method: 'post',
              url: setter.urlTest + '/formula/getFormulaTree',
              data: {
                token: token,
                ftype: '1'
              },
              success: function (res) {
                // console.log(res);
                var inputDom = document.getElementById('custom')
                var data = eval('[' + res.jsonStr + ']')
                // console.log(data);
                data.forEach(item => {
                  let obj = item;
                  var keyMap = {
                    "text": "title"
                  }
                  for (let key in obj) {
                    let newKey = keyMap[key];
                    if (newKey) {
                      obj[newKey] = obj[key]
                      delete obj[key]
                    }
                  }
                })
                tree.render({
                  elem: '#formula-computer',
                  data: data,
                  id: 'formula',
                  showLine: false,
                  text: {
                    defaultNodeName: data[0].text
                  },
                  click: function (obj) {
                    var flag = inputDom.value.charAt(inputDom.value.length - 1);
                    flag = flag === '' ? '+' : flag
                    var dataName = obj.data.fullname
                    dataName = dataName.substr(0, dataName.indexOf('_'))
                    if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
                      inputDom.value = inputDom.value + dataName
                    } else {
                      layer.msg('请先选择运算符')
                    }
                  }

                })
              }
            })


            $.ajax({
              method: 'post',
              url: setter.urlTest + '/formula/getFormulaTree',
              data: {
                token: token,
                ftype: '2'
              },
              success: function (res) {

                var inputDom = document.getElementById('custom')
                var data = eval('[' + res.jsonStr + ']')
                data.forEach(item => {
                  let obj = item;
                  var keyMap = {
                    "text": "title"
                  }
                  for (let key in obj) {
                    let newKey = keyMap[key];
                    if (newKey) {
                      obj[newKey] = obj[key]
                      delete obj[key]
                    }
                  }
                })
                tree.render({
                  elem: '#formula-user',
                  data: data,
                  id: 'formula2',
                  showLine: false,
                  text: {
                    defaultNodeName: data[0].text
                  },
                  click: function (obj) {
                    var flag = inputDom.value.charAt(inputDom.value.length - 1);
                    flag = flag === '' ? '+' : flag
                    var dataName = obj.data.fullname
                    dataName = dataName.substr(0, dataName.indexOf('_'))
                    if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
                      inputDom.value = inputDom.value + dataName
                    } else {
                      layer.msg('请先选择运算符')
                    }
                  }

                })
              }
            })
          }
        })






        // var newTreeData = {
        //     title: data.treeData.text,
        //     fullname: data.treeData.fullname,
        //     id: data.treeData.id,
        //     children: data.treeData.nodes,
        //     spread: true
        // }
        // var keyMap = {
        //     "nodes": "children",
        //     "text": "title"
        // }

        // newTreeData.children.forEach(item => {
        //     // console.log(item);
        //     let obj = item;
        //     for (let key in obj) {
        //         let newKey = keyMap[key];
        //         if (newKey) {
        //             obj[newKey] = obj[key]
        //             delete obj[key]
        //             if (newKey === 'children') {
        //                 obj.children.forEach(item => {
        //                     let obj2 = item;
        //                     for (let key2 in obj2) {
        //                         let newKey2 = keyMap[key2];
        //                         if (newKey2) {
        //                             obj2[newKey2] = obj2[key2]
        //                             delete obj2[key2]
        //                         }
        //                     }
        //                 })
        //             }
        //         }
        //     }
        // })

        // var newTreeDataArr = [newTreeData]
        // // console.log(newTreeDataArr);

        // // -------------------------------











      }



    }

  );
</script>